// 客家小程序_1/miniprogram/pages/heat-map/heat-map.ts
import ColorUISdk from '../../mp-sdk/index'
import QQMapWX from '../../libs/qqmap-wx-jssdk'

// 初始化腾讯地图
const qqmapsdk = new QQMapWX({
  key: 'OVABZ-4RSC4-GHOUA-FH2VR-LY5SZ-F2B4E' 
})

const sdk = new ColorUISdk({
  env: 'dev',
  version: '1.0.0',
  api: {
    dev: { 
      url:'http://192.168.134.31:5000'
    }
  }
})

Page({
  data: {
    mapContext: null as any,
    heatData: [] as any[],
    loading: true,
    errorMsg: '',
    // 新增：存储地图中心坐标
    latitude: 0,
    longitude: 0
  },

  onLoad() {
    // 获取地图上下文
    this.setData({
      mapContext: wx.createMapContext('heatMap')
    })
    
    // 获取打卡位置数据
    this.getCheckinLocations()
    
    // 获取当前位置并移动到该位置
    this.getUserLocation()
  },

  // 获取用户位置
  getUserLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        
        // 移动地图到用户位置
        this.data.mapContext.moveToLocation({
          latitude: res.latitude,
          longitude: res.longitude,
          scale: 14
        })
      }
    })
  },

  // 获取打卡位置数据
  async getCheckinLocations() {
    try {
      const res = await sdk.request({
        url: '/checkin/locations',
        method: 'GET'
      })
      
      this.setData({
        loading: false
      })
      
      if (res.code === 0 && res.data.length > 0) {
        // 处理热力图数据格式
        const heatData = res.data.map((item: any) => ({
          latitude: item.latitude,
          longitude: item.longitude,
          intensity: item.count // 用打卡次数作为热力强度
        }))
        
        this.setData({
          heatData
        })
        
        // 添加热力图图层
        this.addHeatMapLayer()
      } else {
        this.setData({
          errorMsg: '暂无打卡数据'
        })
      }
    } catch (error) {
      this.setData({
        loading: false,
        errorMsg: '获取数据失败，请稍后重试'
      })
    }
  },

  // 添加热力图图层
  addHeatMapLayer() {
    const { heatData, mapContext } = this.data
    
    if (!mapContext || heatData.length === 0) return
    
    // 修复：移除了qqmapsdk.getHeatMap的调用
    // 直接使用微信地图组件的覆盖层功能添加热力图
    mapContext.addOverlay({
      id: 'heatmap',
      type: 'heatmap',
      // 直接使用处理后的热力数据
      data: heatData,
      styles: {
        // 热力图样式配置
        'color': {
          'stops': [
            { 'value': 0, 'color': 'rgba(0, 255, 255, 0)' },
            { 'value': 0.2, 'color': 'rgba(0, 255, 255, 0.5)' },
            { 'value': 0.4, 'color': 'rgba(0, 128, 255, 0.6)' },
            { 'value': 0.6, 'color': 'rgba(0, 0, 255, 0.7)' },
            { 'value': 0.8, 'color': 'rgba(128, 0, 255, 0.8)' },
            { 'value': 1, 'color': 'rgba(255, 0, 255, 0.9)' }
          ]
        },
        // 可添加其他热力图样式配置
        'radius': 20 // 热力点半径
      }
    })
  }
})
